<template>
  <div class="UserAnalysis">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder">
                <i class="el-icon-user-solid"></i>
              </div>
              <span class="text"> 日活跃用户数 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
              <el-tooltip
                class="item"
                effect="dark"
                content="环比"
                placement="bottom"
              >
                <p class="up"><i class="el-icon-caret-top"></i> 30%</p>
              </el-tooltip>
            </div>
          </div>
          <!-- <hr />
              <h3>2020-9-15</h3> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder">
                <i class="el-icon-time"></i>
              </div>
              <span class="text"> 日活跃时长 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
              <el-tooltip
                class="item"
                effect="dark"
                content="环比"
                placement="bottom"
              >
                <!-- <p class="up"><i class="el-icon-caret-top"></i> 300</p> -->
                <p class="down"><i class="el-icon-caret-bottom"></i> 30%</p>
              </el-tooltip>
            </div>
          </div>
          <!-- <hr />
              <h3>2020-9-15</h3> -->
        </el-card>
      </el-col>
    </el-row>
    <el-card class="tableCard">
      <div class="head">
        <div class="titel">用户小时活跃人数表</div>
        <div class="search">
          <span class="txt">性别：</span>
          <el-select
            class="sexselect"
            v-model="sex"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channel"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            v-model="time"
            align="right"
            type="date"
            class="time"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            size="small"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <!-- <el-date-picker
                size="small"
                v-model="timeArrA"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusB"
              >
              </el-date-picker> -->
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <div class="chart">
        <div id="echarts" style="width: 100%; height: 100%"></div>
      </div>
    </el-card>
    <el-card class="tableCard">
      <div class="head">
        <div class="titel">用户日活跃时长表</div>
        <div class="search">
          <span class="txt">性别：</span>
          <el-select
            class="sexselect"
            v-model="sex1"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channel1"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <!-- <el-date-picker
                v-model="time"
                align="right"
                type="date"
                class="time"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker> -->
          <el-date-picker
            size="small"
            v-model="timeArrA"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <div class="chart">
        <div id="echartsB" style="width: 100%; height: 100%"></div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <h3>用户存留</h3>
      <div class="searchBox">
        <div class="left">
          <el-radio-group v-model="type" size="small" fill="#7b94d8">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">昨日</el-radio-button>
            <el-radio-button label="3">近七日</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <span class="txt">性别：</span>
          <el-select
            class="sexselect"
            v-model="sex1"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channelA"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="新增注册人数"> </el-table-column>
        <el-table-column prop="address" label="次日"> </el-table-column>
        <el-table-column prop="address" label="3日"> </el-table-column>
        <el-table-column prop="address" label="4日"> </el-table-column>
        <el-table-column prop="address" label="5日"> </el-table-column>
        <el-table-column prop="address" label="6日"> </el-table-column>
        <el-table-column prop="address" label="7日"> </el-table-column>
        <el-table-column prop="address" label="15日"> </el-table-column>
        <el-table-column prop="address" label="30日"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      activeName: "1",
      sex: "",
      sex1: "",
      sexOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      channel: "",
      channel1: "",
      channelOptions: [],
      time: "",
      timeArrA: [],
      startTime: "",
      endTime: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      myChart: null,
      myChartB: null,
      //用户存留
      type: "3",
      channelA: "",
      sex1: "",
      timeArr: [],
      startDate: "",
      endDate: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    handleClick() {},
    //配置Echarts
    setMyChart() {
      console.log("set");
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChart.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["金额", "人数"],
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "人数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          //   {
          //     name: "金额",
          //     type: "line",
          //     barWidth: 30,
          //     data: [10],
          //   },
          //   {
          //     name: "人数",
          //     type: "line",
          //     yAxisIndex: 1,
          //     barWidth: 30,
          //     data: [20],
          //   },
          {
            name: "金额",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            name: "人数",
            data: [82, 93, 91, 934, 120, 130, 120],
            yAxisIndex: 1,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    setMyChartB() {
      console.log("setB");
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChartB.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["金额", "人数"],
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "人数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          //   {
          //     name: "金额",
          //     type: "line",
          //     barWidth: 30,
          //     data: [10],
          //   },
          //   {
          //     name: "人数",
          //     type: "line",
          //     yAxisIndex: 1,
          //     barWidth: 30,
          //     data: [20],
          //   },
          {
            name: "金额",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            name: "人数",
            data: [82, 93, 91, 934, 120, 130, 120],
            yAxisIndex: 1,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    //用户存留
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    focusB() {
      if (!this.timeArrA) {
        this.timeArrA = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    getList() {},
    //基于标签发送请求
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts"));
    this.myChartB = this.$echarts.init(document.getElementById("echartsB"));
    this.setMyChart();
    this.setMyChartB();
  },
  watch: {
    type: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArr = [time, time];
          this.startDate = time;
          this.endDate = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.UserAnalysis {
  padding: 20px;
  .card {
    .titel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .iconborder {
          border: 5px solid #ccd4fe;
          border-radius: 50%;
          display: inline-block;
          i {
            border: 10px solid #7b94d8;
            border-radius: 50%;
            padding: 5px;
            color: #7b94d8;
          }
        }
        .text {
          margin-left: 10px;
          font-weight: 700;
          color: #7b94d8;
          font-size: 18px;
        }
      }
      .right {
        .num {
          font-size: 24px;
          font-weight: 800;
          color: #7e84a4;
        }
        p {
          text-align: right;
          margin: 10px 0;
          font-weight: 600;
        }
        .up {
          color: #41c49a;
        }
        .down {
          color: #fc512d;
        }
      }
    }
    hr {
      border: none;
      border-top: 1px solid #7b94d8;
    }
    h3 {
      margin: 0;
      color: #7b94d8;
    }
  }
  .tableCard {
    margin-top: 20px;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .titel {
        font-weight: 700;
        font-size: 20px;
      }
      .search {
        display: flex;
        align-items: center;
      }
      .txt {
        display: inline-block;
        height: 32px;
        background-color: #f5f7fa;
        line-height: 32px;
        padding-left: 10px;
        color: #9d9399;
        border-radius: 4px 0 0 4px;
        border: 1px solid #dcdfe6;
        border-right: none;
      }
      /deep/ .el-input__inner {
        border-radius: 0 4px 4px 0 !important;
      }
      .sexselect {
        width: 100px;
        margin: 0 10px 0 0;
      }
    }
    .chart {
      width: 100%;
      height: 500px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
    }
    .right {
      display: flex;
      align-items: center;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
      margin-left: 10px;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .sexselect {
      width: 100px;
      margin: 0 10px 0 0;
    }
    .label {
      display: inline-block;
      width: 50px;
      text-align: center;
    }
  }
  .chart {
    width: 100%;
    height: 500px;
  }
  .userPoint {
    .chartC {
      height: 350px;
    }
    .chartD {
      height: 350px;
    }
    .chartE {
      height: 727px;
    }
  }
}
</style>